<template>
	<view class="container">
		<!-- 页面标题 -->
		<view class="page-header">
			<text class="page-title">推荐任务</text>
		</view>
		
		<!-- 推荐说明 -->
		<view class="recommend-info">
			<text class="info-text">根据您的位置、接单数量和星级评分，为您推荐以下任务</text>
		</view>
		
		<!-- 推荐任务列表 -->
		<view class="task-list">
			<view class="task-item" v-for="(task, index) in recommendedTasks" :key="index">
				<view class="task-header">
					<text class="task-id">任务编号：{{ task.id }}</text>
					<text class="task-status" :class="task.statusClass">{{ task.status }}</text>
				</view>
				
				<view class="task-content">
					<view class="task-info">
						<text class="task-title">{{ task.title }}</text>
						<text class="task-desc">{{ task.description }}</text>
					</view>
					
					<view class="task-details">
						<view class="detail-item">
							<text class="detail-label">客户：</text>
							<text class="detail-value">{{ task.customer }}</text>
						</view>
						<view class="detail-item">
							<text class="detail-label">地址：</text>
							<text class="detail-value">{{ task.address }}</text>
						</view>
						<view class="detail-item">
							<text class="detail-label">距离：</text>
							<text class="detail-value distance">{{ task.distance }}km</text>
						</view>
						<view class="detail-item">
							<text class="detail-label">接单时间：</text>
							<text class="detail-value">{{ task.appointmentTime }}</text>
						</view>
						<view class="detail-item">
							<text class="detail-label">报酬：</text>
							<text class="detail-value price">¥{{ task.reward }}</text>
						</view>
						<view class="detail-item">
							<text class="detail-label">推荐理由：</text>
							<text class="detail-value reason">{{ task.reason }}</text>
						</view>
					</view>
				</view>
				
				<view class="task-footer">
					<text class="publish-time">{{ task.publishTime }}发布</text>
					<button 
						class="grab-btn" 
						:class="{ disabled: task.status !== '待抢接' }"
						@click="grabTask(task)"
						:disabled="task.status !== '待抢接'">
						{{ task.status === '待抢接' ? '抢单' : (task.status === '已抢接' ? '已抢接' : '已完成') }}
					</button>
				</view>
			</view>
			
			<!-- 无推荐任务提示 -->
			<view v-if="recommendedTasks.length === 0" class="no-tasks">
				<text class="no-tasks-text">暂无推荐任务</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 模拟当前员工信息
				currentEmployee: {
					id: 'E001',
					name: '技术员',
					starRating: 4.8, // 星级评分
					totalOrders: 126, // 总接单数
					currentLocation: {
						latitude: 39.9042,
						longitude: 116.4074
					}
				},
				
				// 推荐任务列表
				recommendedTasks: [
					{
						id: 'RW20230510005',
						title: '空调维修',
						description: '家用壁挂式空调不制冷，需要专业技师上门检修',
						customer: '陈先生',
						address: '北京市朝阳区某某小区8号楼1201',
						distance: 1.5,
						appointmentTime: '2023-05-11 15:00',
						reward: 158.00,
						publishTime: '2023-05-10 14:30',
						status: '待抢接',
						statusClass: 'status-waiting',
						reason: '距离近且与您擅长的空调维修技能匹配'
					},
					{
						id: 'RW20230510006',
						title: '设备保养',
						description: '中央空调定期保养维护',
						customer: '某科技公司',
						address: '北京市海淀区某某大厦12层1208室',
						distance: 3.2,
						appointmentTime: '2023-05-12 09:30',
						reward: 298.00,
						publishTime: '2023-05-10 13:45',
						status: '待抢接',
						statusClass: 'status-waiting',
						reason: '高报酬任务，与您高星级评分匹配'
					},
					{
						id: 'RW20230510007',
						title: '设备安装',
						description: '新购洗衣机安装及调试',
						customer: '刘女士',
						address: '北京市西城区某某小区3号楼502',
						distance: 2.1,
						appointmentTime: '2023-05-11 11:00',
						reward: 128.00,
						publishTime: '2023-05-10 12:15',
						status: '待抢接',
						statusClass: 'status-waiting',
						reason: '距离适中，与您高接单量经验匹配'
					},
					{
						id: 'RW20230510008',
						title: '设备维修',
						description: '冰箱制冷效果不佳',
						customer: '赵先生',
						address: '北京市东城区某某小区15号楼3单元601',
						distance: 0.8,
						appointmentTime: '2023-05-11 16:30',
						reward: 98.00,
						publishTime: '2023-05-10 15:20',
						status: '待抢接',
						statusClass: 'status-waiting',
						reason: '距离最近，紧急订单优先推荐'
					}
				]
			}
		},
		
		onLoad() {
			// 页面加载时获取当前位置
			this.getCurrentLocation();
			// 根据位置、接单数和星级计算推荐任务
			this.calculateRecommendations();
		},
		
		methods: {
			// 获取当前位置（模拟实现）
			getCurrentLocation() {
				// 实际项目中应该使用 uni.getLocation API 获取位置
				console.log('获取当前位置:', this.currentEmployee.currentLocation);
				// uni.getLocation({
				// 	type: 'wgs84',
				// 	success: (res) => {
				// 		this.currentEmployee.currentLocation = {
				// 			latitude: res.latitude,
				// 			longitude: res.longitude
				// 		};
				// 		this.calculateRecommendations();
				// 	},
				// 	fail: (err) => {
				// 		console.error('获取位置失败:', err);
				// 		uni.showToast({
				// 			title: '获取位置失败',
				// 			icon: 'none'
				// 		});
				// 	}
				// });
			},
			
			// 计算推荐任务（模拟实现）
			calculateRecommendations() {
				// 实际项目中应该根据以下因素计算推荐：
				// 1. 任务与当前位置的距离
				// 2. 员工历史接单数量
				// 3. 员工星级评分
				// 4. 任务类型与员工技能匹配度
				// 5. 任务报酬等
				console.log('计算推荐任务...');
				
				// 这里模拟排序逻辑，实际应该根据算法排序
				this.recommendedTasks.sort((a, b) => {
					// 优先推荐距离近的任务
					if (a.distance !== b.distance) {
						return a.distance - b.distance;
					}
					// 如果距离相同，按报酬排序
					return b.reward - a.reward;
				});
			},
			
			// 抢单
			grabTask(task) {
				if (task.status !== '待抢接') {
					uni.showToast({
						title: task.status === '已抢接' ? '该任务已被抢接' : '该任务已完成',
						icon: 'none'
					});
					return;
				}
				
				uni.showModal({
					title: '确认抢单',
					content: '确认抢接任务 ' + task.id + ' 吗？',
					success: (res) => {
						if (res.confirm) {
							// 实际项目中这里应该调用接口抢单
							task.status = '已抢接';
							task.statusClass = 'status-grabbed';
							
							uni.showToast({
								title: '抢单成功',
								icon: 'success'
							});
							
							// 从推荐列表中移除已抢任务
							// this.recommendedTasks = this.recommendedTasks.filter(item => item.id !== task.id);
						}
					}
				});
			}
		}
	}
</script>

<style>
	.container {
		padding: 20rpx;
		padding-top: calc(20rpx + var(--status-bar-height)); /* 为状态栏和导航栏留出空间 */
		padding-bottom: calc(120rpx + env(safe-area-inset-bottom)); /* 为底部导航栏和安全区域留出空间 */
		padding-bottom: calc(120rpx + constant(safe-area-inset-bottom)); /* 兼容旧版iOS */
		min-height: 100vh;
		background-color: #f5f5f5;
		box-sizing: border-box;
	}
	
	.page-header {
		text-align: center;
		padding: 20rpx 0;
		margin-bottom: 20rpx;
		background-color: #fff;
		border-radius: 10rpx;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
	}
	
	.page-title {
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
	}
	
	.recommend-info {
		padding: 20rpx;
		background-color: #e8f4ff;
		text-align: center;
		margin-bottom: 20rpx;
		border-radius: 10rpx;
	}
	
	.info-text {
		font-size: 28rpx;
		color: #007AFF;
	}
	
	.task-list {
		display: flex;
		flex-direction: column;
		gap: 20rpx;
	}
	
	.task-item {
		background-color: #fff;
		border-radius: 10rpx;
		padding: 30rpx;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
	}
	
	.task-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20rpx;
		padding-bottom: 20rpx;
		border-bottom: 1rpx solid #eee;
	}
	
	.task-id {
		font-size: 28rpx;
		font-weight: bold;
		color: #333;
	}
	
	.task-status {
		font-size: 24rpx;
		padding: 5rpx 15rpx;
		border-radius: 30rpx;
	}
	
	.status-waiting {
		background-color: #cce5ff;
		color: #004085;
	}
	
	.status-grabbed {
		background-color: #fff3cd;
		color: #856404;
	}
	
	.status-completed {
		background-color: #d4edda;
		color: #155724;
	}
	
	.task-content {
		margin-bottom: 20rpx;
	}
	
	.task-info {
		margin-bottom: 20rpx;
	}
	
	.task-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
		display: block;
		margin-bottom: 10rpx;
	}
	
	.task-desc {
		font-size: 28rpx;
		color: #666;
		display: block;
	}
	
	.task-details {
		display: flex;
		flex-direction: column;
		gap: 10rpx;
	}
	
	.detail-item {
		display: flex;
	}
	
	.detail-label {
		font-size: 26rpx;
		color: #999;
		width: 120rpx;
	}
	
	.detail-value {
		font-size: 26rpx;
		color: #333;
		flex: 1;
	}
	
	.distance {
		color: #007AFF;
		font-weight: bold;
	}
	
	.price {
		color: #ff4d4f;
		font-weight: bold;
	}
	
	.reason {
		color: #ff6600;
		font-style: italic;
	}
	
	.task-footer {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-top: 20rpx;
		border-top: 1rpx solid #eee;
	}
	
	.publish-time {
		font-size: 24rpx;
		color: #999;
	}
	
	.grab-btn {
		background-color: #007AFF;
		color: white;
		border: none;
		padding: 15rpx 30rpx;
		border-radius: 30rpx;
		font-size: 28rpx;
	}
	
	.grab-btn.disabled {
		background-color: #ccc;
	}
	
	.grab-btn:active {
		background-color: #0056cc;
	}
	
	.no-tasks {
		text-align: center;
		padding: 40rpx 0;
		background-color: #fff;
		border-radius: 10rpx;
	}
	
	.no-tasks-text {
		font-size: 28rpx;
		color: #999;
	}
</style>